import React, { Component } from "react";
import "./BillShowBar.scss";
import Calendar from "../../images/icon/calendar.png";
/**账单页面tabbar */
export class BillShowBar extends Component {
	constructor(props) {
		super(props);
		this.state = {
			tabIndex: 0
		};
	}

	render() {
		let showBar = this.props.showData;
		let billType = this.props.billType || "1";
		let tag;
		if (!showBar.repaymentDto) {
			tag = <div></div>;
		} else if (showBar.billStatus == "-1") {
			// 未授信
			tag = <div></div>;
		} else if (showBar.billStatus == "0") {
			// 未出账
			tag = (
				<div>
					<div className="list-far">
						{billType != "2" && (
							<div className="top_bar_far">
								<div className="list-title">
									<div className="title-wrapper">
										<img
											alt="calendar"
											src={Calendar}
											className="icon-pay-date"
										/>
										<span className="pay-title">账单日</span>
									</div>
									<div className="font-date">{showBar.billDate}</div>
								</div>
							</div>
						)}
						<div className="space"></div>
						<div className="item">
							<div className="item-left">
								<div className="item-month">待还款金额(元)</div>
								<div className="item-money">{showBar.billTotalAmount}</div>
							</div>
						</div>
					</div>
					{(showBar.repaymentDto.termInterest != "0.00" ||
						showBar.repaymentDto.tradeAmount != "0.00") && (
						<div>
							<div className="space"></div>
							<div className="item-ll">
								{showBar.repaymentDto.termInterest != "0.00" && (
									<div className="item">
										<div className="item-left">上期产生利息</div>
										<div className="item-right">
											{showBar.repaymentDto.termInterest}元
										</div>
									</div>
								)}
								{/*{*/}
								{/*(showBar.repaymentDto.termPenaltyInterest != '0.00') &&*/}
								{/*<div className='item'>*/}
								{/*<div className='item-left'>上期逾期利息</div>*/}
								{/*<div className='item-right'>{showBar.repaymentDto.termPenaltyInterest}元</div>*/}
								{/*</div>*/}
								{/*}*/}
								{showBar.repaymentDto.tradeAmount != "0.00" && (
									<div className="item">
										<div className="item-left">本期消费金额</div>
										<div className="item-right">
											{showBar.repaymentDto.tradeAmount}元
										</div>
									</div>
								)}
							</div>
						</div>
					)}
				</div>
			);
		} else {
			tag = (
				<div>
					<div className="list-far">
						{billType != "2" && (
							<div className="top_bar_far">
								<div className="list-title">
									<div className="title-wrapper">
										<img
											alt="calendar"
											src={Calendar}
											className="icon-pay-date"
										/>
										<span className="pay-title">最后还款日</span>
										{showBar.billStatus == "2" && (
											<div className="top_bar_tips_red bg-gold">账单已结清</div>
										)}
										{showBar.billStatus == "3" && (
											<div className="top_bar_tips_red bg-gold">无需还款</div>
										)}
										{showBar.billStatus == "4" && (
											<div className="top_bar_tips_red">本月逾期</div>
										)}
										{showBar.billStatus == "5" && (
											<div className="top_bar_tips_red bg-gold">还款中</div>
										)}
										{showBar.billStatus == "6" && (
											<div className="top_bar_tips_red bg-grey">已最低还款</div>
										)}
										{showBar.billStatus == "1" && showBar.rtnStatus == "1" && (
											<div className="top_bar_tips_red">今日为最后还款日</div>
										)}
									</div>
									<div className="font-date">{showBar.rtnDate}</div>
								</div>
							</div>
						)}
						<div className="space"></div>
						<div className="item">
							<div className="item-left">
								<div className="item-month">账单总额(元)</div>
								<div className="item-money">{showBar.billTotalAmount}</div>
							</div>
							<div className="item-right">
								<div className="item-month">本期已还金额(元)</div>
								<div className="item-money">{showBar.rtnPrincipal}</div>
							</div>
						</div>
					</div>
					{(showBar.repaymentDto.termAmount != "0.00" ||
						showBar.repaymentDto.termInterest != "0.00" ||
						showBar.repaymentDto.tradeAmount != "0.00") && (
						<div>
							<div className="item-ll">
								{showBar.repaymentDto.termAmount != "0.00" && (
									<div className="item">
										<div className="item-left">上期未还本金</div>
										<div className="item-right">
											{showBar.repaymentDto.termAmount}元
										</div>
									</div>
								)}
								{showBar.repaymentDto.termInterest != "0.00" && (
									<div className="item">
										<div className="item-left">上期未还利息</div>
										<div className="item-right">
											{showBar.repaymentDto.termInterest}元
										</div>
									</div>
								)}
								{/*{*/}
								{/*(showBar.repaymentDto.termPenaltyInterest != '0.00') &&*/}
								{/*<div className='item'>*/}
								{/*<div className='item-left'>上期逾期利息</div>*/}
								{/*<div className='item-right'>{showBar.repaymentDto.termPenaltyInterest}元</div>*/}
								{/*</div>*/}
								{/*}*/}
								{showBar.repaymentDto.tradeAmount != "0.00" && (
									<div className="item">
										<div className="item-left">本期消费金额</div>
										<div className="item-right">
											{showBar.repaymentDto.tradeAmount}元
										</div>
									</div>
								)}
							</div>
						</div>
					)}
				</div>
			);
		}

		return <div className="bill-show-bar">{tag}</div>;
	}
}
